<template>
  <div class="department">
    <page-search
      @reset-query-list="resetQueryInfo"
      @user-query-list="userQueryList"
      :search-config="searchConfig"
    />
    <page-content
      ref="pageContentRef"
      @handler-new-click="handlerNewClick"
      @handler-edit-click="handlerEditClick"
      :content-config="contentConfig"
    />
    <page-modal ref="pageModalRef" :modal-config="modalConfigs" />
  </div>
</template>

<script setup lang="ts">
import useMainStore from '@/store/modules/main'

import pageSearch from '@/components/page-search/page-search.vue'
import searchConfig from './config/searchConfig'

import pageContent from '@/components/page-content/page-content.vue'
import contentConfig from './config/contentConfig'

import pageModal from '@/components/page-modal/page-modal.vue'
import modalConfig from './config/modalConfig'
import { ref, computed } from 'vue'
const pageContentRef = ref<InstanceType<typeof pageContent>>()
const pageModalRef = ref<InstanceType<typeof pageModal>>()

// 对 modalConfig 的操作
const modalConfigs = computed(() => {
  const mainStore = useMainStore()
  const optionsKey = mainStore.departmentList.map((item) => {
    return { value: item.id, label: item.name }
  })
  modalConfig.formItems.forEach((item) => {
    if (item.prop === 'parentId') {
      item.options?.push(...optionsKey)
    }
  })
  return modalConfig
})

function resetQueryInfo() {
  pageContentRef.value?.postUserList()
}
function userQueryList(formData: any) {
  pageContentRef.value?.postUserList(formData)
}
function handlerNewClick() {
  pageModalRef.value?.setDialogModal()
}
function handlerEditClick(userInfo: any) {
  pageModalRef.value?.setDialogModal(false, userInfo)
}
</script>

<style lang="less" scoped>
.department {
  h2 {
    color: red;
  }
}
</style>
